<template>
  <div class="home_marke" :class="{ pd_10: isMobile() }">
    <div :class="{ flex_left_right: !isMobile(), home_main_m: !isMobile() }">
      <div class="flex_right">
        <img :src="getImageUrl('dy')" />
        <IWrapper class="wraper_main_m" :style="styleData">
          <ITitle :title="'深度行业认知，聚焦价值落地'" label="核心优势" :borderVail="false"></ITitle>
          <div class="marketing_dis font_16 line_height_24">
           自公司成立以来，专注于汽车行业新媒体业务；自有成熟的运营方法，深谙数据运营平台规则逻辑，并有完整的流程运作体系；助力为汽车行业新媒体提供更全面更优质的全渠道与全链路系统解决⽅案
          </div>
        </IWrapper>
      </div>
      <div class="flex_right" v-if="!isMobile()">
        <IWrapper class="wraper_main_m" :style="styleData">
          <ITitle :title="'技术赋能拓展营销边界'" label="多元业务支持" :borderVail="false"></ITitle>
          <div class="marketing_dis font_16 line_height_24">
            整合直播基地、达人等资源，为车企打造多样化营销场景。同时，连接小程序、官网等多渠道用户入口，汇聚海量用户需求，通过任务中台高效调度，让营销流程更流畅、更智能
          </div>
        </IWrapper>
        <img :src="getImageUrl('jz')" />
      </div>
      <div v-else>
        <img :src="getImageUrl('jz')" />
        <IWrapper class="wraper_main_m">
          <ITitle :title="'技术赋能拓展营销边界'" label="多元业务支持" :borderVail="false"></ITitle>
          <div class="marketing_dis font_16 line_height_24">
            整合直播基地、达人等资源，为车企打造多样化营销场景。同时，连接小程序、官网等多渠道用户入口，汇聚海量用户需求，通过任务中台高效调度，让营销流程更流畅、更智能
          </div>
        </IWrapper>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { getImageUrl } from '@/utils'
  import { defineAsyncComponent, ref } from 'vue'
  import { isMobile } from '@/utils'
  const IWrapper = defineAsyncComponent(() => import('./comm/IWrapper.vue'))
  const ITitle = defineAsyncComponent(() => import('@/components/comm/ITitle.vue'))
  const styleData = ref({
    height: isMobile() ? '' : '600px',
  })
</script>
<style scoped lang="less">
  .home_marke {
    align-items: stretch;
    .flex_right {
      height: 100%;
    }
    .wraper_main_m {
        .marketing_dis {
          margin-top: 32px;
          color: #666666;
        }
      }
  }
  :deep(.wraper_main_m .clue-title) {
    text-align: left;
  }
</style>
